<jsp:include page="header.jsp" />

<h2>Create A Contact</h2>
<form class="form-horizontal" style="margin-left:-100px;" action="contacts/create_contact" id="create_contact" method="post">

    <div class="control-group">
        <label class="control-label" for="first_name">First Name</label>
        <div class="controls">
            <input type="text" id="first_name" name="first_name" placeholder="First Name">
        </div>
    </div>
    
    <div class="control-group">
        <label class="control-label" for="last_name">Last Name</label>
        <div class="controls">
            <input type="text" id="last_name" name="last_name" placeholder="Last Name">
        </div>
    </div>
    
    <div class="control-group">
        <label class="control-label" for="email">Email</label>
        <div class="controls">
            <input type="email" id="email" name="email" placeholder="youremail@yourdomain.com">
        </div>
    </div>
    
    <div class="control-group">
        <label class="control-label" for="phone_number">Phone Number</label>
        <div class="controls">
            <input type="tel" id="phone_number" name="phone_number" placeholder="(222)222-2222">
        </div>
    </div>
    
    <div class="control-group">
        <label class="control-label" for="title">Title</label>
        <div class="controls">
            <input type="text" id="title" name="title" placeholder="Title">
        </div>
    </div>
    
    <div class="control-group">
        <label class="control-label" for="Department">Department</label>
        <div class="controls">
            <input type="text" id="department" name="department" placeholder="department">
        </div>
    </div>

    <div class="form-actions" style="background-color: #ffffff; border-top: none;">
        <button type="submit"  class="btn btn-primary">Create</button>
        <a href="<?= base_url() ?>contacts" class="btn">Cancel</a>
    </div>
</form>

<script>
 $('#create_contact').submit(function(e) {

        if($('#first_name').val() == ''  ||  $('#last_name').val() == ''  ||  $('#email').val() == ''  ||  $('#title').val() == '' ||  $('#phone_number').val() == '')
        {
            alert('You must fill in at least First Name, Last Name, Email, Title ')
            return false;
        }
        else
            return true;
    });    
</script>



<jsp:include page="footer.jsp" />